<template>
    <div id="app">
        <el-menu
                @select="menuFn"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">登录</el-menu-item>
            <el-menu-item index="2">注册</el-menu-item>
        </el-menu>

        <el-container>
            <el-aside width="200px" style="height: 900px">
                <el-menu
                        @select="menuFn2"
                        style="height: 100%"
                        default-active="10"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">

                    <el-submenu index="10">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>进销存管理系统</span>
                            <el-menu-item index="10-1">首页</el-menu-item>

                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>资料管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1">供应商管理</el-menu-item>
                                    <el-menu-item index="1-2">客户管理</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>采购管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item-group>
                                        <el-menu-item index="2-1">采购入库</el-menu-item>
                                        <el-menu-item index="2-2">采购信息查询</el-menu-item>
                                    </el-menu-item-group>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>销售管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="3-1">销售出库</el-menu-item>
                                    <el-menu-item index="3-2">销售信息查询</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>库存管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1">库存管理</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>统计信息</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="5-1">销售统计</el-menu-item>
                                    <el-menu-item index="5-2">客户统计</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="6">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>权限管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="6-1">用户管理</el-menu-item>
                                    <el-menu-item index="6-2">角色管理</el-menu-item>
                                </el-menu-item-group>

                            </el-submenu>

                            <el-submenu index="7">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>个人信息管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="7-1">修改密码</el-menu-item>
                                </el-menu-item-group>

                            </el-submenu>

                            <el-submenu index="8">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>日志信息</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="8-1">日志一览</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </template>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>

    </div>
</template>
<script>
    export default {
        name: 'App',
        methods: {
            menuFn(index) {
                if (index == 1) {
                    this.$router.push("LoginView")
                }
            },
            menuFn2(index) {
                if (index == '10-1') {
                    this.$router.push("IndexView")
                }
                else if (index == '1-1'){
                    this.$router.push("SupplierView")
                }
                else if (index == '1-2'){
                    this.$router.push("CustomerView")
                }
                else if (index == '2-1'){
                    this.$router.push("PurchaseView")
                }
                else if (index == '2-2'){
                    this.$router.push("PurchaseInfoView")
                }
                else if (index == '3-1'){
                    this.$router.push("RetrievaView")
                }
                else if (index == '3-2'){
                    this.$router.push("SalesInfoView")
                }
                else if (index == '4-1'){
                    this.$router.push("InventoryView")
                }
                else if (index == '6-1'){
                    this.$router.push("UserView")
                }
                else if (index == '6-2'){
                    this.$router.push("RoleView")
                }
                else if (index == '5-1'){
                    this.$router.push("SalesCountView")
                }
                else if (index == '5-2'){
                    this.$router.push("CustomerConuntView")
                }
                else if (index == '7-1'){
                    this.$router.push("ChangePwdView")
                }
                else if (index == '8-1'){
                    this.$router.push("LogView")
                }







            },
        }
    }
</script>
<style lang="scss">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    nav {
        padding: 30px;

        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }
</style>